import '../../css/index/top.scss';
import '../../css/index/index.scss';
import $ from '../jquery.min.js';
// import highcharts from "commonjs-highcharts"




//左侧导航栏 二级菜单切换
$('#left-all').on('click','li[class*="li"]',function(){
    $(this).next().slideToggle();
})


//房屋统计图
var chart = Highcharts.chart('houseInfor', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '房屋统计'
    },
    xAxis: {
        categories: ['入住率', '出租率', '空置率'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '房屋总量 (套)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' 套'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                allowOverlap: true // 允许数据标签重叠
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 200,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    series: [{
        name: '百分比',
        data: [70, 20, 5]
    }]
});

//满意度
var chart = Highcharts.chart('satisfied', {
	chart: {
		type: 'spline'
	},
	title: {
		text: '满意度'
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月',
					 '七月', '八月', '九月', '十月', '十一月', '十二月']
	},
	yAxis: {
		title: {
			text: '满意度'
		},
		labels: {
			formatter: function () {
				return this.value + '%';
			}
		}
	},
	tooltip: {
		crosshairs: true,
		shared: true
	},
	plotOptions: {
		spline: {
			marker: {
				radius: 4,
				lineColor: '#666666',
				lineWidth: 1
			}
		}
	},
	series: [{
		name: '',
		marker: {
			symbol: 'square'
		},
		data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
			y: 26.5,
			marker: {
				symbol: 'url(https://code.highcharts.com.cn/highcharts/graphics/sun.png)'
			}
		}, 23.3, 18.3, 13.9, 9.6]
	}, {
		name: '',
		marker: {
			symbol: 'diamond'
		},
		data: [{
			y: 3.9,
			marker: {
				symbol: 'url(https://code.highcharts.com.cn/highcharts/graphics/snow.png)'
			}
		}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
	}]
});
//工单统计
var chart = Highcharts.chart('workOrder', {
    chart: {
        type: 'column'
    },
    title: {
        text: '工单统计'
    },
    xAxis: {
        type: 'category',
    },
    yAxis: {
        min: 0,
        title: {
            text: ' '
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: '',
        data: [
            ['智能系统', 24.25],
            ['消防系统', 23.50],
            ['清洁绿化', 21.51],
            ['空调维修', 16.78],
            ['电梯问题', 16.06],
            ['其他问题', 15.20],
        ],
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.0f}', // :.1f 为保留 1 位小数
            y: 0,
            x:-7
        }
    }]
});

//开门类型
var chart = Highcharts.chart('openType', {
    chart: {
        spacing : [40, 0 , 40, 0]
    },
    title: {
        floating:true,
        text: '开门总次数'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            },
            point: {
                events: {
                    mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                        // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                        chart.setTitle({
                            text: e.target.name+ '\t'+ e.target.y + ' %'
                        });
                    }
                    //, 
                    // click: function(e) { // 同样的可以在点击事件里处理
                    //     chart.setTitle({
                    //         text: e.point.name+ '\t'+ e.point.y + ' %'
                    //     });
                    // }
                }
            },
        }
    },
    series: [{
        type: 'pie',
        innerSize: '80%',
        name: '市场份额',
        data: [
            {name:'人脸识别',   y: 25.0, url : 'http://bbs.hcharts.cn'},
            ['指纹开门',       23.8],
            {
                name: '远程开门',
                y: 24.2,
                sliced: true,
                selected: true,
                url: 'http://www.hcharts.cn'
            },
            ['app扫描',    13.5],
            ['门禁刷卡',     13.5],
        ]
    }]
}, function(c) { // 图表初始化完毕后的会掉函数
    // 环形图圆心
    var centerY = c.series[0].center[1],
        titleHeight = parseInt(c.title.styles.fontSize);
    // 动态设置标题位置
    c.setTitle({
        y:centerY + titleHeight/2
    });
});

$('#home').click(function(){
    pageChange();
    $("#propertyHome").addClass('show')
})

function pageChange(){
    const divs=$('#main-right >div');
    divs.each(function(){
        $(this).addClass('hide')
        $(this).removeClass('show')
    })
}